<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, defineExpose } from 'vue'
// 模拟数据
import { currentFun, transHistoryData, getDataFromLocalStorage,processFirstItem } from "@/utils/utils.ts"
import request from '@/utils/request'
// 使用 defineProps 接收一个字符串数组
const props = defineProps<{ commonData: {} }>();

const biapValue = ref(['current', 'Ua', 'Uab', 'ppower', 'qpower', 'spower'])

// 搜索3台柜子环境温度数据
const chartDom0 = ref(null);
const chartDom1 = ref(null);
const chartDom2 = ref(null);
const chartDom3 = ref(null);
const chartDom4 = ref(null);
const chartDom5 = ref(null);
// --------------->
const chartDom00 = ref(null);
const chartDom11 = ref(null);
const chartDom22 = ref(null);
const chartDom33 = ref(null);
const chartDom44 = ref(null);
const chartDom55 = ref(null);
// --------------->
const chartDom000 = ref(null);
const chartDom111 = ref(null);
const chartDom222 = ref(null);
const chartDom333 = ref(null);
const chartDom444 = ref(null);
const chartDom555 = ref(null);


const huanJinBom0 = reactive({
  name: "电流",
  unit: 'A',
  typeColor: '#f3c249',
  barColor: ["rgba(51, 86, 206", "rgba(28, 214, 108", "rgba(249, 226, 50", "rgba(218, 42, 77", "rgba(243, 107, 26", "rgba(248, 223, 44", "rgba(79, 202, 203", "rgba(84, 102, 237", "rgba(101, 34, 199"]


});
const huanJinBom1 = reactive({
  name: "相电压",
  unit: 'V',
  typeColor: '#f3c249',
  barColor: ["rgba(51, 86, 206", "rgba(28, 214, 108", "rgba(249, 226, 50", "rgba(218, 42, 77", "rgba(243, 107, 26", "rgba(248, 223, 44", "rgba(79, 202, 203", "rgba(84, 102, 237", "rgba(101, 34, 199"]


});
const huanJinBom2 = reactive({
  name: "线电压",
  unit: 'V',
  typeColor: '#f3c249',
  barColor: ["rgba(51, 86, 206", "rgba(28, 214, 108", "rgba(249, 226, 50", "rgba(218, 42, 77", "rgba(243, 107, 26", "rgba(248, 223, 44", "rgba(79, 202, 203", "rgba(84, 102, 237", "rgba(101, 34, 199"]


});
const huanJinBom3 = reactive({
  name: "有功功率",
  unit: 'W',
  typeColor: '#62cf41',
  barColor: ["rgba(51, 86, 206", "rgba(28, 214, 108", "rgba(249, 226, 50", "rgba(218, 42, 77", "rgba(243, 107, 26", "rgba(248, 223, 44", "rgba(79, 202, 203", "rgba(84, 102, 237", "rgba(101, 34, 199"]


});
const huanJinBom4 = reactive({
  name: "无功功率",
  unit: 'VAR',
  typeColor: '#62cf41',
  barColor: ["rgba(51, 86, 206", "rgba(28, 214, 108", "rgba(249, 226, 50", "rgba(218, 42, 77", "rgba(243, 107, 26", "rgba(248, 223, 44", "rgba(79, 202, 203", "rgba(84, 102, 237", "rgba(101, 34, 199"]


});
const huanJinBom5 = reactive({
  name: "视在功率",
  unit: 'VA',
  typeColor: '#62cf41',
  barColor: ["rgba(51, 86, 206", "rgba(28, 214, 108", "rgba(249, 226, 50", "rgba(218, 42, 77", "rgba(243, 107, 26", "rgba(248, 223, 44", "rgba(79, 202, 203", "rgba(84, 102, 237", "rgba(101, 34, 199"]

});


// 子组件传递父组件
const emit = defineEmits(['getValue'])

const transValue = (isZ: boolean) => {
  emit("getValue", isZ)
}

const childMethod = () => {
  getSData()
};
// 暴露方法，使得父组件可以调用
defineExpose({
  childMethod
});
let dataNew = ref([])
// 相电流
const huanJinBomlabels0 = ["A相", "B相", "C相"];// 标签数组
const huanJinBomfields0 = ["Ia", "Ib", "Ic"];  // 你可以修改这个数组来选择要包含的字段 需要的字段（可以动态配置）
// 相电压
const huanJinBomlabels1 = ["A相", "B相", "C相"];
const huanJinBomfields1 = ["Ua", "Ub", "Uc"];
// 线电压
const huanJinBomlabels2 = ["A线", "B线", "C线"];
const huanJinBomfields2 = ["Uca", "Uab", "Ubc"];
// 有功功率
const huanJinBomlabels3 = ["all", "A相", "B相", "C相"];
const huanJinBomfields3 = ["pPowerAll", "pPowerA", "pPowerB", "pPowerC"];
// 无功功率
const huanJinBomlabels4 = ["all", "A相", "B相", "C相"];
const huanJinBomfields4 = ["qPowerAll", "qPowerA", "qPowerB", "qPowerC"];
// 视在功率
const huanJinBomlabels5 = ["all", "A相", "B相", "C相"];
const huanJinBomfields5 = ["sPowerAll", "sPowerA", "sPowerB", "sPowerC"];



// 3台柜子 定义配电柜和图表类型的映射
const cabinetConfig = [
  {
    dataIndex: 0, // 配电柜1的数据索引
    chartDoms: {
      current: chartDom0, // 相电流
      voltagePhase: chartDom1, // 相电压
      voltageLine: chartDom2, // 线电压
      activePower: chartDom3, // 有功功率
      reactivePower: chartDom4, // 无功功率
      apparentPower: chartDom5, // 视在功率
    },
  },
  {
    dataIndex: 1, // 配电柜2的数据索引
    chartDoms: {
      current: chartDom00,
      voltagePhase: chartDom11,
      voltageLine: chartDom22,
      activePower: chartDom33,
      reactivePower: chartDom44,
      apparentPower: chartDom55,
    },
  },
  {
    dataIndex: 2, // 配电柜3的数据索引
    chartDoms: {
      current: chartDom000,
      voltagePhase: chartDom111,
      voltageLine: chartDom222,
      activePower: chartDom333,
      reactivePower: chartDom444,
      apparentPower: chartDom555,
    },
  }
];

// 定义图表类型与数据处理参数的映射
const chartTypeConfig = {
  current: {
    huanJinBom: huanJinBom0,
    labels: huanJinBomlabels0,
    fields: huanJinBomfields0,
  },
  voltagePhase: {
    huanJinBom: huanJinBom1,
    labels: huanJinBomlabels1,
    fields: huanJinBomfields1,
  },
  voltageLine: {
    huanJinBom: huanJinBom2,
    labels: huanJinBomlabels2,
    fields: huanJinBomfields2,
  },
  activePower: {
    huanJinBom: huanJinBom3,
    labels: huanJinBomlabels3,
    fields: huanJinBomfields3,
  },
  reactivePower: {
    huanJinBom: huanJinBom4,
    labels: huanJinBomlabels4,
    fields: huanJinBomfields4,
  },
  apparentPower: {
    huanJinBom: huanJinBom5,
    labels: huanJinBomlabels5,
    fields: huanJinBomfields5,
  },
};

// 通用的更新函数
const updateChart = async (chartDom: any, config: any, data: any) => {
  if (chartDom.value) {
    await currentFun(chartDom, config.huanJinBom, transHistoryData(processFirstItem(data,'delete'), config.labels, config.fields),data[0].name);
  }
};

// 获取数据主函数
const getSData = async () => {
  try {
    const data = await request.post('/media/powerParamHistory', getDataFromLocalStorage());
    dataNew.value = data.data;

    await nextTick();
    await new Promise((resolve) => setTimeout(resolve, 100));
    // 遍历配电柜配置
    const updatePromises = cabinetConfig.flatMap((cabinet) => {
      const data = dataNew.value[cabinet.dataIndex];   

      if (!data) return [];
      // 遍历图表类型
      return Object.entries(cabinet.chartDoms).map(async ([type, chartDom]) => {
        const config = chartTypeConfig[type];
        await updateChart(chartDom, config, data);
      });
    });

    // 并行更新所有图表
    await Promise.all(updatePromises);

    transValue(false);
  } catch (error) {
    console.error('Error in getSData:', error);
  }
};

const dianliu = ref(true)
const xiangdian = ref(true)
const xiandian = ref(true)
const yougong = ref(true)
const wugong = ref(true)
const shizai = ref(true)   

// 定义参数与对应变量和函数的映射
const paramConfig = {
  current: {
    value: dianliu,
    chartDoms: [chartDom0, chartDom00, chartDom000],
    huanJinBom: huanJinBom0,
    labels: huanJinBomlabels0,
    fields: huanJinBomfields0,
  },
  Ua: {
    value: xiangdian,
    chartDoms: [chartDom1, chartDom11, chartDom111],
    huanJinBom: huanJinBom1,
    labels: huanJinBomlabels1,
    fields: huanJinBomfields1,
  },
  Uab: {
    value: xiandian,
    chartDoms: [chartDom2, chartDom22, chartDom222],
    huanJinBom: huanJinBom2,
    labels: huanJinBomlabels2,
    fields: huanJinBomfields2,
  },
  ppower: {
    value: yougong,
    chartDoms: [chartDom3, chartDom33, chartDom333],
    huanJinBom: huanJinBom3,
    labels: huanJinBomlabels3,
    fields: huanJinBomfields3,
  },
  qpower: {
    value: wugong,
    chartDoms: [chartDom4, chartDom44, chartDom444],
    huanJinBom: huanJinBom4,
    labels: huanJinBomlabels4,
    fields: huanJinBomfields4,
  },
  spower: {
    value: shizai,
    chartDoms: [chartDom5, chartDom55, chartDom555],
    huanJinBom: huanJinBom5,
    labels: huanJinBomlabels5,
    fields: huanJinBomfields5,
  },
};
// 通用的更新函数
const updateCharts = (config: any, dataIndex: number) => {
  const { chartDoms, huanJinBom, labels, fields } = config;
  chartDoms.forEach((chartDom: any) => {
    currentFun(
      chartDom,
      huanJinBom,
      transHistoryData(processFirstItem(dataNew.value[dataIndex],'delete'), labels, fields),
      dataNew.value[dataIndex][0].name
    );
  });
};

// 主函数
const changBox = (par: string[]) => {
  Object.keys(paramConfig).forEach((key) => {
    const config = paramConfig[key];
    if (par.includes(key)) {
      config.value.value = true; // 更新复选框状态
      setTimeout(() => {
        // 遍历数据并更新图表
        dataNew.value.forEach((_, index) => {
          updateCharts(config, index);
        });
      }, 50);
    } else {
      config.value.value = false; // 更新复选框状态
    }
  });
};

onMounted(async () => {
  if(getDataFromLocalStorage()){
    getSData()
  }
})

</script>

<template>
  <div class="h-max">
    <div class="biaoshi">
      <div style="flex: 1;"></div>
      <el-checkbox-group v-model="biapValue" @change="changBox">
        <el-checkbox label="电流" value="current" size="large"  />
        <el-checkbox label="相电压" value="Ua" size="large"  />
        <el-checkbox label="线电压" value="Uab" size="large"  />
        <el-checkbox label="有功功率" value="ppower" size="large"  />
        <el-checkbox label="无功功率" value="qpower" size="large"  />
        <el-checkbox label="视在功率" value="spower" size="large"  />
      </el-checkbox-group>
    </div>

    <!-- 3台柜子 -->
    <!-- 电流 -->
    <div class="maxBox" v-if="dianliu && dataNew[0]">
      <div ref="chartDom0" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="dianliu && dataNew[1]">
      <div ref="chartDom00" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="dianliu && dataNew[2]">
      <div ref="chartDom000" class="chartDomLei"></div>
    </div>
    <!-- 相电压 -->
    <div class="maxBox" v-if="xiangdian && dataNew[0]">
      <div ref="chartDom1" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="xiangdian && dataNew[1]">
      <div ref="chartDom11" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="xiangdian && dataNew[2]">
      <div ref="chartDom111" class="chartDomLei"></div>
    </div>
    <!-- 线电压 -->
    <div class="maxBox" v-if="xiandian && dataNew[0]">
      <div ref="chartDom2" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="xiandian && dataNew[1]">
      <div ref="chartDom22" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="xiandian && dataNew[2]">
      <div ref="chartDom222" class="chartDomLei"></div>
    </div>
    <!-- 有功功率 -->
    <div class="maxBox" v-if="yougong && dataNew[0]">
      <div ref="chartDom3" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="yougong && dataNew[1]">
      <div ref="chartDom33" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="yougong && dataNew[2]">
      <div ref="chartDom333" class="chartDomLei"></div>
    </div>
    <!-- 无功功率 -->
    <div class="maxBox" v-if="wugong && dataNew[0]">
      <div ref="chartDom4" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="wugong && dataNew[1]">
      <div ref="chartDom44" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="wugong && dataNew[2]">
      <div ref="chartDom444" class="chartDomLei"></div>
    </div>
    <!-- 视在功率 -->
    <div class="maxBox" v-if="shizai && dataNew[0]">
      <div ref="chartDom5" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="shizai && dataNew[1]">
      <div ref="chartDom55" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-if="shizai && dataNew[2]">
      <div ref="chartDom555" class="chartDomLei"></div>
    </div>
    <!-- </div>
    <div v-else>
      暂无数据
    </div> -->

  </div>
</template>

<style scoped lang="scss">
.h-max {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;

  .biaoshi {
    width: 1750px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: right;
    :deep(.el-checkbox-group) .el-checkbox {
      margin-right: 15px;
    }

    .colorItem {
      // width: 120px;
      height: 40px;
      padding-right: 30px; 
      // border: 1px solid #ffffff;
      display: flex;
      align-items: center;

      .colorItem-color {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        // background-color: #ffffff;
        margin-right: 20px;
      }
    }
  }

  .maxBox {
    // padding: 15px;
    padding-left: 0;
    padding-bottom: 30px;
    padding-right: 30px;
    box-sizing: border-box;
    // border: 1px solid #ffffff;/

    .chartDomLei {
      // border: 1px solid #ffffff;

      width: 860px;
      height: 420px;
    }
  }

}
</style>
